<!DOCTYPE html>
<html>
<head>
    <title>地图</title>
    <link rel="stylesheet" href="__CDN__/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="__CDN__/assets/css/fastadmin.min.css"/>
    <link rel="stylesheet" href="__CDN__/assets/libs/font-awesome/css/font-awesome.min.css"/>
</head>
<style>
    #map {
        height: 100%;
    }

    /* Optional: Makes the sample page fill the window. */
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .confirm {
        position: absolute;
        bottom: 30px;
        right: 4%;
        z-index: 99;
        height: 50px;
        width: 50px;
        line-height: 50px;
        font-size: 15px;
        text-align: center;
        background-color: white;
        background: #1ABC9C;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 50%;
    }


</style>
<body>
<div class="confirm">确定</div>
<div id="map"></div>

<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
        src="https://maps.googleapis.com/maps/api/js?key={$config.googlekey}&callback=initMap&libraries=&v=weekly"
        async
></script>
<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<script>
    var lat = {$config.lat};
    var lng = {$config.lng};
    var address = '{$config.location}';
    let map;
    let markers = [];
    function initMap() {
        const myLatlng = { lat: lat, lng: lng };
        map = new google.maps.Map(document.getElementById("map"), {
            zoom: 10,
            center: myLatlng,
        });
        const geocoder = new google.maps.Geocoder();
        addMarker(myLatlng);
        // Configure the click listener.
        map.addListener("click", (mapsMouseEvent) => {
            var myLatlng = mapsMouseEvent.latLng.toJSON();
            lat = myLatlng.lat;
            lng = myLatlng.lng;
            geocoder.geocode({ location: myLatlng }, (results, status) => {
                if (status === "OK") {
                    if (results[0]) {
                        address = results[0].formatted_address;
                    } else {
                        window.alert("No results found");
                    }
                } else {
                    window.alert("Geocoder failed due to: " + status);
                }
            });
            deleteMarkers();
            addMarker(myLatlng);
        });
    }
    // Sets the map on all markers in the array.
    function setMapOnAll(map) {
        for (let i = 0; i < markers.length; i++) {
            markers[i].setMap(map);
        }
    }
    function addMarker(location) {
        const marker = new google.maps.Marker({
            position: location,
            map: map,
        });
        markers.push(marker);
    }
    function clearMarkers() {
        setMapOnAll(null);
    }
    function deleteMarkers() {
        clearMarkers();
        markers = [];
    }
    var close = function (data) {
        var index = parent.Layer.getFrameIndex(window.name);
        var callback = parent.$("#layui-layer" + index).data("callback");
        //再执行关闭
        parent.Layer.close(index);
        //再调用回传函数
        if (typeof callback === 'function') {
            callback.call(undefined, data);
        }
    };

    //点击确定后执行回调赋值
    $(document).on('click', '.confirm', function () {

        var data = {lat: lat, lng: lng, address: address};
        close(data);
    });
</script>
</body>
</html>
